<template>
  <div class="container">
    <div class="left">
      <div class="item">左侧 - 行 1</div>
      <div class="item">左侧 - 行 2</div>
      <div class="item">左侧 - 行 3</div>
    </div>
    <div class="middle">
      <div class="item"> </div>
      <div class="item">
        <Cylinder style="height: 300px"></Cylinder>
      </div>
    </div>
    <div class="right">
      <div class="item">右侧 - 行 1</div>
      <div class="item">右侧 - 行 2</div>
      <div class="item">右侧 - 行 3</div>
    </div>
  </div>
</template>
<script>
  import Cylinder from './TestComponents/Cylinder.vue';
  export default {
    data() {
      return {};
    },
    components: {
      Cylinder,
    },
  };
</script>
<style lang="less">
  // 定义变量
  @left-width: 25%;
  @right-width: 25%;
  @middle-width: calc(100% - @left-width - @right-width);
  @border-color: #ffffff33;
  @bg-color-left-right: #f8f8f8;
  @bg-color-middle: #e0e0e0;
  @item-bg-color1: #f9f9f9;
  @item-bg-color2: #e9e9e9;
  @item-bg-color3: #d9d9d9;

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: url(../assets/image/bg.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    color: white;
  }

  .container {
    display: grid;
    grid-template-columns: @left-width auto @right-width;
    grid-template-rows: repeat(3, 1fr);
    height: 100vh;
    width: 100vw;
    overflow: hidden; // Hide any overflow
  }

  .left {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
  }

  .middle {
    grid-column: 2 / 3;
    grid-row: 1 / 4; // Ensure it spans all 3 rows
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    overflow: hidden; // Hide overflow content if needed
  }

  .right {
    grid-column: 3 / 4;
    grid-row: 1 / 4;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid @border-color;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
